<template>
    <div>
        <div class="container"
             id="container">
            <div class="vip-one">
                <template v-if="Object.keys(userinfo).length > 0">
                    <van-image width="66"
                               height="66"
                               fit="cover"
                               round
                               :src="userinfo.headimgurl" />
                    <p class="vip-one-name">{{ userinfo.account }}</p>
                    <p class="vip-one-card">
                        <span v-if="agent_level == 2 && dis_level == 2">游客</span>
                        <span v-if="agent_level == 2 && dis_level == 1">养殖户</span>
                        <span v-if="agent_level == 1">{{ dlsname }}</span>
                        <span>ID:{{ userinfo.user_id }}</span>
                        <span>金猪币:￥{{ balance }}</span>
                    </p>

                </template>
                <template v-else>
                    <van-image width="66"
                               height="66"
                               fit="cover"
                               round
                               :src="defaultimg" />
                    <button class="vip-one-btn"
                            @click="bindLogin">去登录</button>
                </template>
            </div>

            <div class="vip-two flexs">
                <div class="vip-two-item"
                     @click="bindOrder">
                    <van-image width="46"
                               height="46"
                               fit="cover"
                               round
                               :src="require('../assets/images/a42.png')"></van-image>
                    <p>我的订单</p>
                </div>
                <div class="vip-two-item"
                     @click="bindShopOrder">
                    <van-image width="46"
                               height="46"
                               fit="cover"
                               round
                               :src="require('../assets/images/a41.png')"></van-image>
                    <p>商城订单</p>
                </div>
                <div class="vip-two-item"
                     @click="bindzc">
                    <van-image width="46"
                               height="46"
                               fit="cover"
                               round
                               :src="require('../assets/images/a21.png')"></van-image>
                    <p>我的资产</p>
                </div>
                <div class="vip-two-item"
                     @click="bindtg">
                    <van-image width="46"
                               height="46"
                               fit="cover"
                               round
                               :src="require('../assets/images/a20.png')"></van-image>
                    <p>推广二维码</p>
                </div>
            </div>

            <div class="vip-three">
                <div class="vip-three-item flexs"
                     @click="bindzh">
                    <div class="vip-three-left">
                        <i class="iconfont icon-shezhi"></i>
                        <span>账号管理</span>
                    </div>
                    <div class="vip-three-right">
                        <i class="iconfont icon-changyongicon-"></i>
                    </div>
                </div>
                <!--分销商-->
                <!-- <div class="vip-three-item flexs" @click="bindFx" v-show="dis_level == 1">
                    <div class="vip-three-left">
                        <i class="iconfont icon-fenxiao"></i>
                        <span>分销商中心</span>
                    </div>
                    <div class="vip-three-right">
                        <i class="iconfont icon-changyongicon-"></i>
                    </div>
                </div> -->
                <!--订货商-->
                <!-- <div class="vip-three-item flexs" @click="bindDl" v-show="indent_level == 1">
                    <div class="vip-three-left">
                        <i class="iconfont icon-liuliangyunpingtaitubiao03"></i>
                        <span>订货商中心</span>
                    </div>
                    <div class="vip-three-right">
                        <i class="iconfont icon-changyongicon-"></i>
                    </div>
                </div> -->

                <!-- <div class="vip-three-item flexs" @click="bindApply" v-show="agent_level == 2">
					<div class="vip-three-left">
						<i class="iconfont icon-shenqingguanli"></i>
						<span>申请代理商</span>
					</div>
					<div class="vip-three-right">
						<i class="iconfont icon-changyongicon-"></i>
					</div>
				</div> -->
                <div class="vip-three-item flexs"
                     @click="bindkf">
                    <div class="vip-three-left">
                        <i class="iconfont icon-custom-service"></i>
                        <span>专属客服</span>
                    </div>
                    <div class="vip-three-right">
                        <i class="iconfont icon-changyongicon-"></i>
                    </div>
                </div>
                <div class="vip-three-item flexs"
                     @click="bindwt">
                    <div class="vip-three-left">
                        <i class="iconfont icon-wenti"></i>
                        <span>常见问题</span>
                    </div>
                    <div class="vip-three-right">
                        <i class="iconfont icon-changyongicon-"></i>
                    </div>
                </div>
                <div class="vip-three-item flexs"
                     @click="bindgy">
                    <div class="vip-three-left">
                        <i class="iconfont icon-guanyuwomen"></i>
                        <span>关于我们</span>
                    </div>
                    <div class="vip-three-right">
                        <i class="iconfont icon-changyongicon-"></i>
                    </div>
                </div>
                <div class="vip-three-item flexs"
                     @click="bindlx">
                    <div class="vip-three-left">
                        <i class="iconfont icon-xinxi small"></i>
                        <span>联系我们</span>
                    </div>
                    <div class="vip-three-right">
                        <i class="iconfont icon-changyongicon-"></i>
                    </div>
                </div>
            </div>
            <div class="height30"></div>
        </div>

        <my-tabbar></my-tabbar>
    </div>
</template>

<script>
import MyTabbar from "@/components/template/tabbar.vue";
// eslint-disable-next-line no-unused-vars
import { _debounce, judgeUrl, getUrlParam } from "@/common/utils.js";
export default {
    data() {
        return {
            defaultimg: require("../assets/images/a19.png"),
            userinfo: {},
            agent_level: 2,
            dis_level: 2,
            indent_level: 2,
            balance: null,
            dlsname: ""
        };
    },
    mounted() {
        document
            .querySelector("body")
            .setAttribute(
                "style",
                "background-color:#fff;position:fixed;width:100%;height:100%;top:0;left:0"
            );
        // 获取浏览器可视区域高度
        var clientHeight = `${document.documentElement.clientHeight}`;
        var zzgd = clientHeight - 60;
        document.getElementById("container").style.height = zzgd + "px";
    },
    beforeDestroy() {
        document.querySelector("body").removeAttribute("style");
    },
    created() {
        //获取用户信息
        let userinfo = this.$store.state.userinfo;

        if (userinfo) {
            this.userinfo = userinfo;
            if (this.agent_level == 2) {
                this.$toast.loading({
                    message: "加载中...",
                    duration: 30000
                });
                this.get_dls();
            }
        }
    },
    components: {
        MyTabbar
    },
    methods: {
        //分销
        bindFx() {
            judgeUrl(this.userinfo, "/distributor/distributCenter", this);
            // this.$router.push('/distributor/distributCenter');
        },

        //订货
        bindDl() {
            judgeUrl(this.userinfo, "/agency/agentCenter", this);
            // this.$router.push('/agency/agentCenter');
        },

        //商城订单
        bindShopOrder: _debounce(function () {
            this.$toast("该商城功能后期开放");
            // judgeUrl(this.userinfo, '/shop/shopOrder', this);
        }, 100),

        //我的订单
        bindOrder() {
            judgeUrl(this.userinfo, "/order", this);
        },

        //我的资产
        bindzc() {
            if (this.agent_level == 2 && this.dis_level == 2) {
                this.$toast("请先购买产品或联系客服！");
            } else {
                judgeUrl(this.userinfo, "/property", this);
            }
        },
        //推广二维码
        bindtg() {
            judgeUrl(this.userinfo, "/promote", this);
        },
        //账号设置
        bindzh() {
            judgeUrl(this.userinfo, "/setup", this);
        },
        //申请代理商
        bindApply() {
            judgeUrl(this.userinfo, "/applyAgent", this);
        },
        //专属客服
        bindkf() {
            this.$router.push("/service");
        },
        //常见问题
        bindwt() {
            this.$router.push("/problem");
        },
        //关于我们
        bindgy() {
            this.$router.push("/about");
        },
        //联系我们
        bindlx() {
            this.$router.push("/contact");
        },
        bindLogin() {
            this.$router.push("/login");
        },

        //获取代理商状态
        get_dls() {
            var that = this;
            let userinfo = that.userinfo;
            that.$axios
                .get("/userinfo", {
                    params: {
                        user_id: userinfo.user_id
                    },
                    headers: {
                        token: userinfo.api_token
                    }
                })
                .then(res => {
                    that.$toast.clear();
                    var codes = res.data.code;
                    if (codes == 1001) {
                        var arrs = res.data.result;
                        that.balance = arrs.balance;
                        that.agent_level = arrs.agent_level;
                        that.dis_level = arrs.dis_level;
                        that.indent_level = arrs.indent_level;
                        if (that.agent_level == 1) {
                            that.dlsname = arrs.agent_user.dlname;
                        }
                    } else {
                        that.$dialog
                            .alert({
                                title: "温馨提示",
                                message: "您还未登录或登录状态失效，请登录后再来操作"
                            })
                            .then(() => {
                                that.$router.push("/login");
                            });
                    }
                })
                .catch(function (error) {
                    console.log("error", error);
                });
        }
    }
};
</script>

<style scoped>
.container {
    width: 100%;
    height: 100%;
    overflow-y: scroll;
    background-color: #fff;
    -webkit-overflow-scrolling: touch;
}

.vip-one-card {
    width: 100%;
    height: 34px;
    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
    align-items: center;
}

.vip-three {
    margin-top: 18px;
    padding-left: 3%;
}

.vip-three-item {
    border-bottom: 1px solid #f6f6f6;
    height: 50px;
}

.vip-three-left {
    display: flex;
    align-items: center;
}

.vip-three-right {
    padding-right: 2%;
}

.vip-three-right i {
    color: #c0c0c0;
    font-size: 18px;
}

.vip-three-left i {
    color: #41d08c;
    font-size: 22px;
    padding-top: 2px;
}

.vip-three-left i.small {
    font-size: 18px;
    margin-left: 4px;
}

.vip-three-left i.icon-shezhi {
    font-size: 20px;
}

.vip-three-left span {
    color: #333;
    font-size: 16px;
    margin-left: 14px;
}

.van-cell__left-icon {
    font-size: 30px;
}

.vip-two-item {
    flex: 1;
    text-align: center;
}

.vip-two-item p {
    color: #555;
    font-size: 14px;
}

.vip-two {
    background: #fff;
    border-radius: 10px;
    min-width: 90%;
    max-width: 94%;
    margin: 0 auto;
    z-index: 11;
    box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.1);
    height: 100px;
    margin-top: -28px;
}

.vip-one {
    width: 100%;
    height: 200px;
    background: url(../assets/images/a18.jpg) no-repeat center center;
    background-size: cover;
    z-index: -1;
    display: flex;
    flex-flow: column wrap;
    align-items: center;
    justify-content: flex-start;
    text-align: center;
    color: #f5f5f5;
}

.vip-one .van-image {
    margin-top: 20px;
    margin-bottom: 10px;
}

.vip-one p.vip-one-name {
    font-size: 16px;
    height: 21px;
    margin-bottom: 3px;
    letter-spacing: 1px;
}

.vip-one span {
    min-width: 60px;
    border: 1px solid #fff;
    font-size: 13px;
    border-radius: 20px;
    text-align: center;
    padding: 1px 5px;
    margin-left: 10px;
    height: 18px;
    line-height: 1.6;
}

.vip-one-btn {
    border: 0;
    outline: none;
    background: none;
    border: 1px solid #fff;
    font-size: 14px;
    width: 80px;
    height: 30px;
    margin: 0 auto;
    border-radius: 5px;
}
</style>
